<script setup lang="ts">
import { getFileList, getFile, update, del } from "@/api/search";
import { useAppStoreHook } from "@/store";
import { downloadFile } from "@/utils/fileControl";
const useAppStore = useAppStoreHook();
const reload_num = computed(() => useAppStore.tableList_isRefresh);
const search_inputText = computed(() => useAppStore.search_inputText);
const route = useRoute();
const router = useRouter();
const tableData = ref([]);
const TbaleListRef = ref(null);
interface Props {}
const props = withDefaults(defineProps<Props>(), {});
const list = ["下载", "分享", "删除", "重命名", "移动到"];
const unShowBtnLists = ref([...list]);
const change_unShowBtnLists = (bool: boolean) => {
  if (bool) {
    unShowBtnLists.value = [];
  } else {
    unShowBtnLists.value = [...list];
  }
};
const renameId = ref("");
const btn_event = async (str: any) => {
  // console.log("str", str);
  let params = {};
  if (str == "下载") {
    params = {
      filePath: TbaleListRef.value.getClickData()[0].filePath,
      fileName: TbaleListRef.value.getClickData()[0].fileName,
      contentType: TbaleListRef.value.getClickData()[0].contentType,
    };
    downloadFile(params);
  }
  if (str == "删除") {
    let params = {
      id: TbaleListRef.value.getClickData()[0].id,
    };
    let res: any = await del(params);
    if (res.code == 0) {
      ElMessage.success(res.msg);
      getTableData();
    } else {
      ElMessage.error(res.msg);
    }
  }
  if (str == "重命名") {
    renameId.value = TbaleListRef.value.getClickData()[0].id;
    TbaleListRef.value.getClickData()[0].EditName = TbaleListRef.value
      .getClickData()[0]
      .fileName.split(".")[0];
  }
  if (str == "分享") {
    share_method();
  }
};
const get_file = async (path: any) => {
  if (!path) return;
  try {
    let res: any = await getFile({
      filePath: path,
    });
    // console.log("res", res);

    let blob = new Blob([res]);
    // console.log("res", URL.createObjectURL(blob));
    return URL.createObjectURL(blob);
  } catch (err) {
    // console.log("get_file_err=>", err);
    return "";
  }
};
const loading = ref(false);
const getTableData = async (fileName?: string) => {
  loading.value = true;
  let params: any = {
    pageSize: 100,
    pageNum: 1,
  };
  if (fileName) {
    params.fileName = fileName;
  }
  params.category = route.query.category;
  let res: any = await getFileList(params);
  if (res.code == 0) {
    tableData.value = res.data.records.map((item: any) => {
      let obj = {
        ...item,
      };
      // if (["2", "1"].includes(item.category)) {
      //   obj.preview = import.meta.env.VITE_APP_API_URL + item.filePath;
      // } else {
      obj.preview = import.meta.env.VITE_APP_API_URL + item.preview;
      // }

      return obj;
    });
    // 通过地址调用接口返回的文件流
    tableData.value.forEach(async (item) => {
      if (["2", "1"].includes(item.category)) {
        await get_file(item.filePath).then((res) => {
          item.preview = res;
        });
        // console.log("tableData.value", tableData.value);
      }
    });
    loading.value = false;
  }
};

watch(
  route,
  () => {
    if (route.query.category) {
      if (search_inputText.value && route.query.category == "all") {
        getTableData(search_inputText.value);
      } else {
        getTableData();
      }
    }
  },
  { immediate: true }
);
watch(
  reload_num,
  () => {
    getTableData();
  }
  // { immediate: true }
);
watch(
  search_inputText,
  (val: any) => {
    if (val) {
      router.replace({ query: { category: "all" } });
      getTableData(val);
    } else {
      getTableData();
    }
  }
  // { immediate: true }
);
onMounted(() => {});
const click_event = (args: any) => {
  if (typeof args == "string") {
    if (args == "刷新表格") {
      getTableData();
    }
  } else {
  }
};
const update_name = async (row: any) => {
  console.log(row);

  let params = {
    fileName: row.EditName + "." + row.fileType,
    id: row.id,
  };
  let res: any = await update(params);
  if (res.code == 0) {
    ElMessage.success(res.msg);
    getTableData();
  }
};

const share_ = ref({
  show: false,
  row: {},
});
const show = ref(false);
const row = ref({});
const share_method = () => {
  show.value = true;
  row.value = TbaleListRef.value.getClickData()[0];
};
</script>

<template>
  <div class="mian-page">
    <BtnGroups
      @btnMethods="btn_event"
      :unShowBtnLists="unShowBtnLists"
    ></BtnGroups>
    <!-- <Breadcrumb @clickName="click_event" /> -->
    <main>
      <TbaleList
        ref="TbaleListRef"
        class="tableList"
        @isShowBtns="change_unShowBtnLists"
        :tableData="tableData"
        :loading="loading"
        :renameId="renameId"
        @click-change="renameId = ''"
        @rename="update_name"
      />
    </main>
    <Share v-model="show" :row="row"></Share>
  </div>
</template>

<style lang="scss" scoped>
.mian-page {
  overflow: hidden;
  main {
    // height: calc(100% - px2rem(40px) - px2rem(40px));
    height: calc(100% - px2rem(40px));
    overflow: hidden;
  }
}
</style>
